<template>
	<view class="content">
		<scroll-view scroll-y="true">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="showCommunicationPicker()">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<text>沟通方式</text>
					<text class="right-text">{{contact_type_name}}</text>
				</view>
			</view>
			<mpvue-picker ref="mpvueCommunicationRef" :deepLength="1" @onConfirm="onCommunicationConfirm" :pickerValueArray="communicationArray"></mpvue-picker>

			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-list-cell-navigate">
					<text>沟通目标</text>
					<input class="right-text" v-model="formData.expect" />
				</view>
			</view>
			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<text>沟通日期</text>
					<picker class="picker" mode="date" :value="formData.contact_date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{formData.contact_date}}</view>
					</picker>
				</view>
			</view>
			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-list-cell-navigate">
					<text>主题</text>
					<input class="right-text" v-model="formData.name" />
				</view>
			</view>
			<view class="uni-list-cell-navigate">
				<text>详情：</text>
			</view>
			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-list-cell-navigate">
					<textarea placeholder="请输入文字" v-model="formData.result" maxlength="-1"></textarea>
				</view>
			</view>
			<view>
				<cus-upload-image removeMark :imageList="formData.picture_data" imgTitle="上传图片" :imgSize="200"></cus-upload-image>
			</view>
			<button class="btn-primary" type="primary" @click="submit">保存</button>
		</scroll-view>
	</view>
</template>

<script>
	import {
		communicationArray
	} from '../../common/stateData.js'
	export default {
		data() {
			return {
				communicationArray: communicationArray, //沟通方式选择器数据
				contact_type_name: '', //沟通方式的名称
				formData: {
					crm_id: '', //商机ID
					contact_date: '', //沟通日期
					contact_type: '', //沟通方式
					expect: '', //沟通目标
					result: '', //详情
					name: '', //主题
					picture_data: [], //图片
				}
			}
		},
		onLoad(param) {
			this.formData.crm_id = parseInt(param.id)
			// this.formData.crm_id = 471
		},
		methods: {
			//显示沟通列表
			showCommunicationPicker() {
				this.$refs.mpvueCommunicationRef.show()
			},
			//沟通方式确认
			onCommunicationConfirm(e) {
				this.formData.contact_type = e.value[0]
				this.contact_type_name = e.label
			},
			//确认时间选择器
			bindDateChange(e) {
				this.formData.contact_date = e.detail.value
			},
			//保存
			submit() {
				uni.showLoading({
					title: '',
					mask: false
				});
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/app_crm_appointment_create',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						...this.formData
					},
					success: res => {
						if (res.data.code === 1) {
							uni.showToast({
								title: '成功,返回列表',
								mask: false,
								duration: 1500
							});
							this.goCommunicationList()
							this.$eventBus.$emit('communicationUpdateExecute')
						} else if (res.data.code === -1) {
							uni.showModal({
								title: '提示',
								content: "请重新登录",
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: "../login/login"
										})
									}
								}
							});
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			//返回列表页面
			goCommunicationList() {
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1500)
			}
		}
	}
</script>

<style scoped>
	.content {
		background-color: #FFFFFF;
	}

	textarea {
		height: 150upx;
	}

	.uni-list-cell-navigate text,
	.uni-list-cell-navigate input {
		flex: 1;
	}

	.right-text,
	picker {
		margin-right: 25upx;
		text-align: right;
	}

	.picker {
		flex: 2;
	}

	.uni-input {
		padding: 0;
	}
</style>
